<script setup name="cusBody">
import {defineEmits, defineProps, nextTick, reactive, ref} from "vue";
const props = defineProps({
  searchCriteria: {
    type: Array,
    default: () => {
      return []
    }
  },
  tableBorder: {
    type: Boolean,
    default: false
  },
  hasPage: {
    type: Boolean,
    default: true
  },
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  },
  tableColumn: {
    type: Array,
    default: () => {
      return []
    }
  },
  operateWidth: {
    type: Number,
    default: 160
  },
  operate: {
    type: Boolean,
    default: true
  },
  operateList: {
    type: Array,
    default: () => {
      return []
    }
  },
  searchCriteriaData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const searchCriteria = ref(null)
const cusBody = ref(null)

console.log(props.searchCriteria)
let tableHeight = ref(null)
const headerStyle = reactive({
  backgroundColor: 'cornflowerblue',
  color: '#ffffff'
})

let formInline = reactive(JSON.parse(JSON.stringify(props.searchCriteriaData)))
console.log(formInline)

// 用于计算table的高度
function getTableHeight() {
  nextTick(() => {
    tableHeight.value = props.hasPage ? `${cusBody.value.clientHeight - searchCriteria.value.clientHeight - 50}px` : `${cusBody.value.clientHeight - searchCriteria.value.clientHeight - 15}px`
  })
}

// 进入页面开始计算表格table的高度
getTableHeight()

// 浏览器窗口大小发生变化时重新计算table的高度
// window.onresize = () => getTableHeight()

const emit = defineEmits(['handleClick'])
function handleClick(data, row) {
  console.log(data.name)
  emit('handleClick' , {
    ...data,
    ...row
  })
}

function onSubmit() {
  emit('getNavList' , formInline)
}

</script>

<template>
  <div class="cus-body" ref="cusBody">
    <div class="search_criteria" ref="searchCriteria">
      <el-form :inline="true" :model="formInline" :stripe="true" class="demo-form-inline">
        <el-form-item :label="data.label" v-for="(data, index) in props.searchCriteria" :key="index">
          <template v-if="data.type === 'input'">
            <el-input v-model="formInline[data.dataValueName]"
                      :placeholder='data.placeholder && data.placeholder !== "" ? data.placeholder : "请输入" '></el-input>
          </template>
          <template v-if="data.type === 'select'">
            <el-select v-model="formInline[data.dataValueName]"
                       filterable
                       :placeholder='data.placeholder && data.placeholder !== "" ? data.placeholder : "请选择" '>
              <el-option
                  v-for="item in data.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>

        </el-form-item>
        <el-form-item>
          <el-button type="primary">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <slot name="searchBtn"></slot>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_body">
      <el-table :border="props.tableBorder" row-key="id" :data="props.tableData" size="default" :header-cell-style="headerStyle" :height="tableHeight"  style="width: 100%">
        <template v-for="(data, index) in props.tableColumn" :key="index" >
          <el-table-column :fixed="data.isFixed" :prop="data.prop" :label="data.label" :width="data.width">
            <template #default="scope" v-if="data.openStol">
              <slot :name="data.prop" :propsData="scope.row"></slot>
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" :width="operateWidth" v-if="props.operate">
          <template #default="scope">
            <slot name="operate" :propsData="scope.row">
              <el-button v-for="(data, index) in operateList" :key="index" @click="handleClick(data, scope.row)" type="text" size="small">{{ data.name }}</el-button>
            </slot>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_body" v-if="props.hasPage">
      <el-pagination
          small
          :hide-on-single-page="false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="props.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">

.cus-body {
  width: 100%;
  height: 100%;
}

.search_criteria {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 20px 15px;
}

.table_body {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0 15px;
}

.table_body_header_class {
  background-color: #a4a4a4;
}

.pagination_body {
  width: 100%;
  height: 50px;
  display: flex;
  //border-top: 1px solid #eeeeee;
  display: -webkit-flex;
  display: -moz-flex;
  align-items: center;
  justify-content: flex-end;
}
</style>